<!--
 * @Author: deliteam 462085920@qq.com
 * @Date: 2024-01-04 15:39:51
 * @Description: 
-->
<!--
 * @Author: deliteam 462085920@qq.com
 * @Date: 2023-11-20 11:39:33
 * @Description: 
-->
<template>
  <div class="header header__top header__transition" data-header>
    <NuxtLink href="/" class="logo" id="logo">
      <img src="/icons/logo.png" alt="" class="w-full">
    </NuxtLink>
    <div class="nav__hamburger" :class="{ 'active-one': isMobNavOpen }" @click="toggleNav">
      <div class="hamburger hamburger-one"></div>
    </div>
    <ul class="nav flex flex-row items-center gap-[50px]" :class="{ 'nav__mobile': !isMobNavOpen }">
      <li>
        <NuxtLink to="/project" class="link" :class="{ active: isProjectActive }" @click="closeNav">
          <b>PROJECTS</b>
          <span>項目</span>
        </NuxtLink>
      </li>
      <li>
        <NuxtLink to="/products" class="link" activeClass="active" @click="closeNav">
          <b>PRODUCTS</b>
          <span>產品</span>
        </NuxtLink>
      </li>
      <li>
        <NuxtLink to="/about" class="link" activeClass="active" @click="closeNav">
          <b>ABOUT</b>
          <span>關於我們</span>
        </NuxtLink>
      </li>
      <li>
        <NuxtLink to="/PRESS" class="link" activeClass="active" @click="closeNav">
          <b>PRESS</b>
          <span>媒體報道</span>
        </NuxtLink>
      </li>
      <li>
        <NuxtLink to="/contact" class="link" activeClass="active" @click="closeNav">
          <b>CONTACT</b>
          <span>聯繫我們</span>
        </NuxtLink>
      </li>
    </ul>
  </div>
  <div class="header-background"></div>
</template>

<script setup>

import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const isProjectActive = computed(() => {
  return route.path.startsWith('/project');
});

const isMobNavOpen = ref(false)
const toggleNav = () => {
  isMobNavOpen.value = !isMobNavOpen.value
};
const closeNav = () => {
  if (isMobNavOpen.value) {
    isMobNavOpen.value = false
  }
}
</script>

<style lang="scss" scoped>
.header {
  z-index: 150;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: fixed;
  background-color: white;
  border-bottom: 0px solid black;
  width: 100%;
  left: 0px;
  align-items: center;
  top: 0px;
  padding-left: 10vh;
  padding-right: 10vh;
}

@media screen and (min-width: 2200px) {
  .header {
    border-bottom: 0px solid black
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .header {
    padding-left: 5%;
    padding-right: 5%
  }
}

@media screen and (max-width: 767px) {
  .header {
    padding-left: 20px;
    padding-right: 20px;
    border: 0px
  }
}

.header-background {
  display: flex;
  background-color: white;
  position: relative;
  width: 100%;
  height: 81px;
  top: 0px;
  left: 0px;
  z-index: -1;
  border-bottom: 0px solid black
}



@media screen and (max-width: 767px) {
  .header-background {
    display: flex;
    background-color: white;
    position: relative;
    width: 100%;
    height: 81px;
    top: 0px;
    left: 0px;
    z-index: -1;
    border-bottom: 0px solid black
  }
}


.header__top {
  padding-top: 25px;
  padding-bottom: 25px;
  transition: padding 0.5s ease
}

@media screen and (max-width: 767px) {
  .header__top {
    padding-top: 20px;
    padding-bottom: 20px
  }
}

.header__transition {
  transition-delay: 0.5s
}

@media screen and (max-width: 767px) {
  .header__transition {
    padding-top: 20px;
    padding-bottom: 20px
  }
}

.header__scrolled {
  -ms-flex-align: center;
  align-items: center;
  transition: padding 2.5s ease
}

@media screen and (max-width: 767px) {
  .header__scrolled {
    padding-top: 20px;
    padding-bottom: 20px
  }
}


.header--hidden {
  transform: translateY(-9rem);
  transition: transform 0.5s ease, padding 0.2s ease,
    align-items 0.2s ease;
  transition: transform 0.5s ease, padding 0.2s ease,
    align-items 0.2s ease, -ms-flex-align 0.2s ease
}

.header--visible {
  transform: translateY(0rem);
  transition: transform 0.5s ease, padding 0.2s ease, align-items 0.2s ease;
  transition: transform 0.5s ease, padding 0.2s ease, align-items 0.2s ease, -ms-flex-align 0.2s ease;
  box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.1);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-self: center;
  align-items: center;
  transition: transform 0.5s ease;
}

@media screen and (max-width: 768px) {

  .nav {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    z-index: -1;
    top: 80px;
    position: fixed;
    left: 0px;
    min-width: 200px;
    width: 100vw;
    background-color: white;
    flex-wrap: wrap;
    transition: transform 0.5s ease;
    transform: translateY(-5vw);
    padding: 20px;
    opacity: 1;
    gap: 0;

    .link {
      padding: 0;

      span {
        display: none;
      }
    }
  }

  .nav__mobile {
    transform: translateY(-80vw);
    // transition: transform 0.5s ease;
    z-index: -100;
    opacity: 0;
  }
}


.nav__hamburger {
  position: relative;
  display: none;
  padding-bottom: 20px;
  padding-top: 20px;
  -ms-flex-item-align: start;
  align-self: flex-start;
  width: 35px;
  cursor: pointer
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .nav__hamburger {
    display: block
  }
}

@media screen and (max-width: 767px) {
  .nav__hamburger {
    display: block
  }
}


.nav__hamburger .hamburger {
  width: 35px;
  height: 1px;
  background: #000;
  position: absolute
}

.nav__hamburger .hamburger:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: -12px;
  background: #000
}

.nav__hamburger .hamburger:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: 12px;
  background: #000
}

.nav__hamburger.active-one .hamburger-one {
  background: rgba(0, 0, 0, 0)
}

.nav__hamburger.active-one .hamburger:before {
  top: 0;
  transform: rotate(45deg)
}

.nav__hamburger.active-one .hamburger:after {
  top: 0;
  transform: rotate(135deg)
}










.link {
  font-family: "gilroy", Sans-Serif;
  display: block;
  height: 40px;
  font-size: 1.125rem;
  padding: 0 0 0 20px;
  color: #000;
  transition: .5s;
  overflow: hidden
}

.link b {
  display: block;
  height: 40px;
  line-height: 40px;
  font-weight: 300;
  position: relative;
  transition: .5s
}

.link span {
  display: block;
  height: 40px;
  line-height: 40px;
  transition: .5s
}

.link:hover b {
  position: relative;
  display: block;
  height: 40px;
  line-height: 40px;
  margin-top: -40px;
  font-size: 1.125rem;
  color: #000;
  transition: .5s
}

.link:hover span {
  display: block;
  height: 40px;
  line-height: 40px;
  font-size: 1.125rem;
  color: #000
}

.link.active {
  b {
    text-decoration: underline;
  }

  span {
    text-decoration: underline;
  }
}
</style>
